<template>
  <div class="production-index">
    <div class="banner-box">
      <banner :imgList="productLeft" height="350px">
        <template slot="content" slot-scope="data">
          <img
            class="image-item"
            :src="data.data.item.picUrl"
            alt=""
            @click="goDetail(data.data.item)"
          />
          <!--<div class="image-content" @click="goDetail(data.data.item)">
            {{ data.data.item.proName }}
          </div>-->
        </template>
      </banner>
    </div>
    <div class="list-box">
      <product-list-box></product-list-box>
    </div>

    <!--        <el-button @click="getInfo"></el-button>-->
  </div>
</template>
<script>
import ProductListBox from "@/views/financialmanagement/ProductListBox";
import Banner from "@/components/Banner";
export default {
  name: "ProductMenu",
  components: {
    ProductListBox,
    Banner
  },
  data() {
    return {
      imgList: [],
      productLeft: null,
      isInfo: false,
      pageNum: Math.floor(Math.random() * 10 + 1)
    };
  },
  methods: {
    getProductLeft() {
      let self = this;
      let params = {
        pageNum: 1,
        pageSize: 6,
        searchCriteria06: 1
      };
      this.$remote(
        "/runtime/pocfinancial/selectPocFinancialListForPage.action",
        params
      ).then(res => {
        this.isInfo = true;
        self.productLeft = res.list;
      });
    },
    goDetail(item) {
      window.sa.track("$CollectFinancialClick", {
        $element_content: item.id
      });
      let session = window.sessionStorage;
      session.setItem("productDetailId", item.id);
      this.$router.push("/ProductDetail");
    }
  },
  created() {
    this.getProductLeft();
    window.sa.track("$pageview", {
      $url_path: "ProductMenu"
    });
  }
};
</script>
<style scoped>
.production-index {
  width: 100%;
  display: flex;
  margin: 26px auto;
}
.banner-box {
  width: 300px;
  height: 350px;
  padding: 0px 10px;
  /*background-color: #42b983;*/
}
.list-box {
  flex-grow: 1;
}
.banner-box:hover {
  cursor: pointer;
}
.image-content {
  text-align: center;
  height: 100%;
  width: 100%;
  background-color: #6ab9ad;
  padding-top: 100px;
}
.banner-box >>> .el-carousel__button {
  width: 10px;
}
</style>
